// const mongoose = require("mongoose");

import Base from "../base.js";
import CinemasApi from '../../api/cinemas.js';

export default class extends Base {
    form = layui.form;
    data = {
        curPage: 1,
        eachPage: 10,//每页显示条数
        total: 0,
        maxPage: 0,//总页数
        rows: [],//当先页数据
    };
    render() {
        // 渲染电影表格
        this.$el.html(`
        <div>
        <h1 style="text-align:center">影院列表</h1>
        <form class="layui-form" action="">
                <div class="layui-form-item" style="margin-left:-28px">
                <label class="layui-form-label" style="width:100px">查询影院</label>
                    <div class="layui-input-inline">
                        <select name="name" class="cinemasId">
                        </select>
                     </div>
                     <button type="button" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
                </div>
      </div>
        </form>
        <table border=1 class="table1 layui-table"  lay-skin="line">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>影院名称</th>
                    <th>联系方式</th>
                    <th>联系地址</th>
                    <th>营业状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="cinemas-list"></body>
        </table>
        <div>
        页数：<select class="curPage layui-btn-primary layui-border""></select>
        共<span class="tatol layui-btn-primary layui-border""></span>条
        当前：<input  type="text" name="eachPage" value="${this.data.eachPage}"class="layui-btn">
        <button class="first-btn layui-btn layui-btn-primary layui-border-green" >首页</button>
        <button class="prve-btn layui-btn layui-btn-primary layui-border-green" >上一页</button>
        <button class="next-btn layui-btn layui-btn-primary layui-border-green">下一页</button>
        <button class="last-btn layui-btn layui-btn-primary layui-border-green">末页</button>
        
    </div>
        </div>
        `);

        this.$cinemaslist = $(".cinemas-list");  // 表格渲染挂载区域
        this.$curpageEle = $(".curPage");//总页数
        this.$tatolEle = $(".tatol");//数据总数
        this.$eachPage = $("input[name=eachPage]");//当前页
        this.$fristBtn = $(".first-btn");//首页
        this.$prveBtn = $(".prve-btn");//上一页
        this.$nextBtn = $(".next-btn");//下一页
        this.$lastBtn = $(".last-btn");//尾页
        this.$table1 = $(".table1");
        this.$search=$(".layui-btn");
        this.$selectEle=$(".cinemasId")
    };

    //渲染电影列表
    rerender() {

        const str = this.data.rows.map((item, index) => {
            // console.log(this.data.rows);
            // console.log(item._id);
            return `<tr>
              <td>${index + 1}</td>
              <td>${item.name}</td>
              <td>${item.phone}</td>
              <td>${item.address}</td>
              <td>${item.status}</td>
              <td>
            <button name="changeBtn" class="layui-btn layui-btn-xs" class="changeBtn" data-index="${item._id}"><i class="layui-icon"></i>修改</button>
            <button name="delBtn" class="layui-btn layui-btn-danger layui-btn-xs"  data-index="${item._id}"><i class="layui-icon"></i>删除</button>
            </td>
              </tr>`
        }).join("");
        this.$delBtn = $("name[delBtn]");
        // this.$changeBtn=$("changeBtn");
        this.$tatolEle.html(this.data.total);
        this.$cinemaslist.html(str);
        let options = "";
        for (let i = 1; i <= this.data.maxPage; i++) {
            options += `<option value="${i}">${i}</option>`
        };
        this.$curpageEle.html(options).val(this.data.curPage);
        this.$selectEle.html(
            `${this.cinemasData.map(item => {
                return `<option value="${item._id}">${item.name}</option>`
            }).join("")}`
        );
        this.form.render();
    };
    async getCinemas() {
        const { curPage, eachPage } = this.data;
        const data = await CinemasApi.get({ curPage, eachPage });
        // console.log(data);
        Object.assign(this.data, data);
        // console.log(this.data);
        this.rerender()
    };
    
    //首页
    first() {
        if (this.data.curPage === 1) return;
        this.data.curPage = 1;
        this.getCinemas();

    };
    // 末页
    last() {
        if (this.data.curPage === this.data.maxPage) return;
        this.data.curPage = this.data.maxPage;
        this.getCinemas();
    };
    // 上一页
    prveHandle() {
        if (this.data.curPage === 1) return;
        this.data.curPage--;
        this.getCinemas();
    };
    // 下一页
    nextHandle() {

        if (this.data.curPage === this.data.maxPage) return;
        this.data.curPage++;
        this.getCinemas();

    };
    //    当前页
    setEachePageHandle(e) {
        this.data.eachPage = ~~e.target.value;
        this.getCinemas();
    };
// 删除和修改
    async removeHandle(e) {
        // const $target=$(e.target);
        // console.log(e.target);
        let event = window.event || e;
        // console.log(event.target);
        if($(event.target).attr("name") == "changeBtn"){
            // 获取影院id
            const _id  = $(event.target).attr("data-index");
            location.hash = `#/info/change-cinemas/${_id}`;
        }
       else if ($(event.target).attr("name") == "delBtn") {
            // console.log("in");
            this.layer.confirm(`是否确定删除？`,async (index)=>{
                const _id  = $(event.target).attr("data-index");
                // console.log(_id);
                await CinemasApi.remove({ _id });
                // console.log(data);
                // 刷新页面
                this.getCinemas();
                layer.close(index);//关闭弹窗
            }) 
            
        }
    }
    // 查询id
    async getNum() {
        this.cinemasData = await CinemasApi.getData();
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        // 将this的指向赋值给that
        const that = this;
        // 电影院下拉列表事件监听
        form.on('select(cinema)', async function (e) {
            console.log(e.value);
            const _id = e.value;
            that.data.rows = [await CinemasApi.findOne(_id)];
            console.log(that.data.rows);
        })

    }
   // 查询
   searchHandle() {
    // console.log(this.data.rows);
    this.rerender();
}
handle() {
    // 首页绑定点击事件
    this.$fristBtn.on("click", this.first.bind(this));
    // 末页绑定点击事件
    this.$lastBtn.on("click", this.last.bind(this));
    // 上一页绑定点击事件
    this.$prveBtn.on("click", this.prveHandle.bind(this));
    // 下一页绑定点击事件
    this.$nextBtn.on("click", this.nextHandle.bind(this));
    // 绑定失去焦点事件
    this.$eachPage.on("blur", this.setEachePageHandle.bind(this));
    this.$table1.on("click", this.removeHandle.bind(this));
    // 搜索按钮
    this.$search.on("click", this.searchHandle.bind(this));
    // 下拉点击
    this.$selectEle.on("change", this.getNum.bind(this))
};
    // 获取数据
    async mounted() {
        await this.getNum();
        this.getCinemas();
    };
}